<template>
	<view class="superwei-combox" :class="border ? '' : 'superwei-combox__no-border'">
		<view v-if="label" class="superwei-combox__label" :style="labelStyle">
			<text>{{label}}</text>
		</view>
		<view class="superwei-combox__input-box">
			<input class="superwei-combox__input" type="text" disabled @click="toggleSelector" :placeholder="placeholder" 
				placeholder-class="superwei-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus"
				@blur="onBlur" />
			<uni-icons v-if="row == '1' && inputVal" type="clear" style="padding: 0px 8px;" size="20" @click="delClick" color="#999">
			</uni-icons>
			<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
			</uni-icons>
		</view>
		<view class="dialog-cover" v-if="showSelector" @click="handleClose"></view>
		<view class="superwei-combox__selector" :class="showType.length>0 ? 'addWidth':''" v-if="showSelector">
			<view class="uni-popper__arrow"></view>
				<view class="h-table" v-if="row == '2'">
					<view class="h-tr h-tr-2 h-thead">
						<view class="h-td h-td-colspan h-td-rowspan">
							<input class="search-input" :placeholder="placeholder" placeholder-style="font-size:26rpx" v-model="locationInput">
						</view>
					</view>
					<view class="h-tr h-tr-2 h-thead">
						<view class="h-td">{{$t('setting.name')}}</view>
						<view class="h-td">{{$t('materials.jobNumber')}}</view>
					</view>
					<view :style="'height: 300rpx;overflow-y: auto;'">
						<view class="h-tr h-tr-2" v-for="(x,i) in list" :key="i" @click="getClickItem(x,false)">
							<view class="h-td">{{x.userName}}</view>
							<view class="h-td">{{x.userNameId}}</view>
						</view>
					</view>
				</view>
                <view class="h-table" v-else>
					<!-- <view class="h-tr h-tr-2 h-thead">
						<view class="h-td h-td-colspan h-td-rowspan">
							<input class="search-input" :placeholder="placeholder" placeholder-style="font-size:14rpx" v-model="locationInput">
						</view>
					</view> -->
					<view class="h-tr h-tr-2 h-thead">
						<view class="h-td h-td-line">{{$t('materials.expenseItem')}}</view>
					</view>
					<view :style="'height: 300rpx;overflow-y: auto;'">
						<view class="h-tr h-tr-2" v-for="(x,i) in list" :key="i" @click="getClickItem(x,true)">
							<view class="h-td h-td-line">{{x.Name}}</view>
						</view>
					</view>
				</view>
				<view class="table-footer">
					<view class="table-info">
					<view class="uni-pagination__btn" :class="currentIndex === 1 ? 'uni-pagination--disabled' : ''" @click="pageUp">
							<uni-icons color="#666" size="16" type="left" />
					</view>
					<text> <text class="text-color">{{currentIndex}}</text>/{{maxPage}}</text>
					<view class="uni-pagination__btn"
						:class="currentIndex >= maxPage ? 'uni-pagination--disabled' : ''" @click="nextPage">
							<uni-icons color="#666" size="16" type="right" />
					</view>
					</view>
					<view class="uni-pagination__btn" @click="rest">
						<uni-icons color="#666" size="16" type="refreshempty" />
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import {locationRequestFrom} from '@/api/api.js'
	import {toRaw} from 'vue';
	/**
	 * Combox 组合输入框
	 * @description 组合输入框一般用于既可以输入也可以选择的场景
	 * @property {String} label 左侧文字
	 * @property {String} labelWidth 左侧内容宽度
	 * @property {String} placeholder 输入框占位符
	 * @property {String} value 组合框的值
	 * @property {String} selectedBackground 选中项背景颜色
	 * @property {String} selectedColor 选中项文字颜色
	 * @property {String} showType 右标题
	 * @property {Bool} requestBool 是否直接请求的标识
     * @property {Bool} row 当前数据为几列
	 */
	export default {
		name: 'superweiCombox',
		emits: ['input', 'update:modelValue','select','setClick'],
		props: {
            row: {
                type: String,
				default: '2'
            },
			showType: {
				type: String,
				default: ''
			},
			selectedBackground: {
				type: String,
				default: '#f5f7fa'
			},
			selectedColor: {
				type: String,
				default: '#409eff'
			},
			border: {
				type: Boolean,
				default: true
			},
			label: {
				type: String,
				default: ''
			},
			labelWidth: {
				type: String,
				default: 'auto'
			},
			placeholder: {
				type: String,
				default: ''
			},
			requestParam:{
				type: Object,
				default () {
					return {}
				}
			},
			requestUrl:{
				type: String,
				default: '',
			},
			requestBool: {
				type:Boolean,
				default:true
			},
			locationUseList:{
				type: Object,
				default () {
					return []
				}
			},
			// #ifdef VUE3
			modelValue: {
				type: [String, Number],
				default: ''
			},
			// #endif
		},
		data() {
			return {
				isInput: false,
				showSelector: false,
				inputVal: '',
				isClick:false,
				currentIndex:1,
				rows:10,
				list:[],
				total:0,
				locationInput:'',
				timer:'',
			}
		},
		computed: {
			labelStyle() {
				if (this.labelWidth === 'auto') {
					return ""
				}
				return `width: ${this.labelWidth}`
			},
			maxPage() {
				return Math.ceil(this.total / this.rows);
			}
		},
		watch: {
			// #ifdef VUE3
			modelValue: {
				handler(newVal) {
					this.inputVal = newVal
					this.isInput = true
				},
				deep:true,
				immediate: true
			},
			// #endif
			locationInput: {
				handler(newVal) {
					console.log(newVal)
					if(this.timer){
					    clearTimeout(this.timer)
					}
					this.timer = setTimeout(() =>{
					    this.changeMachine()
					},1000)
				},
				immediate: true
			},
			requestUrl:{
				handler(newVal) {
					this.inputVal = '';
					this.$emit('setClick', {});
					this.locationInput = ''
				},
				// immediate: true
			}
		},
		methods: {
			delClick() {
				this.inputVal = ''
				this.isInput = true
			},
			// 初始化重置数据
			restInitData(){
				this.inputVal = ''
				this.isInput = true
			},
			getClickItem(x,bool) {
				this.inputVal = bool ? x.Name : x.userName;
				this.$emit('setClick', x);
				this.showSelector = false;
				this.locationInput = ''
			},
			changeMachine() {
				this.locationRequestFn()
			},
			// 重置
			rest(){
				this.locationInput = ''
				this.currentIndex = 1
				this.locationRequestFn()
			},
			// 上一页
			pageUp(){
				if(this.currentIndex == 1) return;
				this.currentIndex--
				this.locationRequestFn()
			},
			// 下一页
			nextPage(){
				if(this.currentIndex >= this.maxPage) return;
				this.currentIndex++
				this.locationRequestFn()
			},
			// 请求信息
			locationRequestFn() {
				if(!this.requestUrl || !this.requestBool) return;
				let parmes = {}
				if(this.row == '2'){
					parmes = {
						page:this.currentIndex,
						rows:this.rows,
						userNameId:this.locationInput,
					}
				}else{
					parmes = {
						page:this.currentIndex,
						rows:this.rows,
					}
				}
				locationRequestFrom(this.requestUrl,parmes).then(res=>{
					console.log(res,'-----res-----')
					this.list = res.rows || [];
					this.total = res.total || 0;
					// if (res.status == 200) {
					// 	this.list = res.data.rows;
					// 	this.total = res.data.total;
					// }else{
					// 	uni.showToast({title: res.message,icon: 'none'})
					// }
				})
			},
			handleClose() {
				this.showSelector = false
				this.locationInput = ''
			},
			toggleSelector() {
				this.showSelector = !this.showSelector
				this.isInput = false
				if(this.showSelector){
					this.currentIndex = 1
					this.locationRequestFn()
				}
			},
			onFocus() {
				this.showSelector = true
				this.isInput = false
				this.currentIndex = 1
				this.locationRequestFn()
			},
			onBlur(e) {
				setTimeout(() => {
					this.isInput = false
					this.isClick = false
				}, 153)
			},
			onInput() {
				setTimeout(() => {
					this.$emit('input', this.inputVal)
					this.$emit('update:modelValue', this.inputVal)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	@media only screen and (max-width: 999px) {
	
		/* 针对手机： */
		.superwei-combox {
			font-size: 14px;
			border: 0px solid #12b7f5;
			border-radius: 4px;
			padding: 6px 10px;
			position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			// height: 40px;
			flex-direction: row;
			align-items: center;
			// border-bottom: solid 1px #DDDDDD;
		}
	
	}
	@media only screen and (min-width: 1000px) {
	
		/* 针对手机： */
		.superwei-combox {
			font-size: 14px;
			border: 2px solid #12b7f5;
			border-radius: 4px;
			padding: 6px 10px;
			position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			// height: 40px;
			flex-direction: row;
			align-items: center;
			// border-bottom: solid 1px #DDDDDD;
		}
	
	}

	.superwei-combox__label {
		font-size: 16px;
		line-height: 22px;
		padding-right: 10px;
		color: #999999;
	}

	.superwei-combox__input-box {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		align-items: center;
	}

	.superwei-combox__input {
		flex: 1;
		font-size: 14px;
		height: 22px;
		line-height: 22px;
		margin-right: 12rpx;
	}

	.superwei-combox__input-plac {
		// font-size: 18px;
		font-size: 14px !important;
		color: #ccc; //placeholder-style="color:#FFFFFF"
	}

	.superwei-combox__selector {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		position: absolute;
		top: calc(100% + 12px);
		left: -24rpx;
		right: -24rpx;
		// width: 100%;
		background-color: #FFFFFF;
		border: 1px solid #EBEEF5;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 702;
		padding: 4px 4px;
	}
	.addWidth{
		width: 120% !important;
		left: -20% !important;
	}


	// picker 弹出层通用的指示小三角
	.uni-popper__arrow,
	.uni-popper__arrow::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}

	.uni-popper__arrow {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		top: -6px;
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.uni-popper__arrow::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}

	.superwei-combox__no-border {
		border: none;
	}
	.table-footer{
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.uni-pagination__btn {
		/* #ifndef APP-NVUE */
		display: flex;
		cursor: pointer;
		/* #endif */
		padding: 0 8px;
		line-height: 30px;
		font-size: 12px;
		position: relative;
		background-color: #F0F0F0;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-radius: 5px;
	}
	.uni-pagination--disabled {
		opacity: 0.5;
		/* #ifdef H5 */
		cursor: default;
		/* #endif */
	}
	.text-color{
		color: #007aff;
	}
	.table-info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80%;
	}
	.dialog-cover{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0,0);
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		z-index: 100;
	}
	.search-input{
		text-align: left;
		width: 80%;
		height: 80%;
		background-color: #fff;
		border-radius: 12rpx;
		color: #666;
		padding: 0 20rpx;
	}
    .h-td-line{
        width: 100% !important;
    }
</style>
